body {
    color: #000b33;
}

header {
    nav {
        .nav-link {
            color: #000 !important;
        }
    }
}

.banner {
    position: relative;

    .home_text {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #000b33;

        h1 {
            font-size: calc(20px + 2.3077vw);
            margin-bottom: 2.6154vw;
        }

        h6 {
            font-size: calc(12px + .3077vw);
            line-height: 26px;
            margin-bottom: 3.8462vw;
        }

        .banner_btn {
            width: calc(96px + 7.6923vw);
            height: calc(40px + 1.5385vw);
            background-color: #fd4c5c;
            border-radius: 5px;
            line-height: calc(40px + 1.5385vw);
            text-align: center;
            font-size: calc(12px +.4615vw);
            color: #fff;
            user-select: none;
            cursor: pointer;
        }
    }
}

.row {
    width: 100%;
}

.module1 {
    margin-top: 6.3077vw;

    .item {
        display: flex;
        flex-direction: column;
        color: #000b33;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: calc(10px + .7692vw);
            height: calc(10px + .7692vw);
            border-radius: 50%;
            background-color: #fd4c5c;
            top: 50%;
            transform: translateY(-50%);
            left: 3.0769vw;
        }

        .num {
            font-size: calc(20px + 2.3077vw);
            margin-bottom: 1.3846vw;
        }

        .title {
            font-size: calc(12px + .3077vw);
        }
    }

    .item:nth-child(2) {
        &::before {
            background-color: #00bb98;
        }
    }

    .item:nth-child(3) {
        &::before {
            background-color: #ffc83e;
        }
    }

    .item:nth-child(4) {
        &::before {
            background-color: #781bff;
        }
    }

    .content2 {
        margin-top: 16.1538vw;

        .left_item {
            display: flex;
            align-items: center;

            .right {
                .content2_item {
                    margin-left: 1.9231vw;
                }
            }
        }

        .content2_item {
            // width: calc(200px + 8.0769vw);
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 30px rgba(0, 28, 128, 0.1);
            margin-bottom: 1.9231vw;
            padding-top: 2.6923vw;
            padding-bottom: 3.4615vw;

            img {
                margin-bottom: 1.5385vw;
            }

            h6 {
                font-size: calc(12px + .6154vw);
                font-weight: bold;
                margin-bottom: 1.1538vw;
            }

            p {
                padding: 0 2.3077vw;
                text-align: center;
            }
        }

        .right_item {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .info {
                color: #00bb98;
                font-size: calc(12px + .6154vw);
                margin-bottom: 1.9231vw;
            }

            h1 {
                font-size: calc(16px + 1.5385vw);
                line-height: 65px;
                margin-bottom: 2.3077vw;
            }

            p {
                font-size: calc(12px + .3077vw);
                // padding-right: 5.3846vw;
            }

            .begin_btn {
                width: calc(100px + 3.8462vw);
                height: calc(30px + 1.5385vw);
                background-color: #fd4c5c;
                border-radius: 5px;
                line-height: calc(30px + 1.5385vw);
                text-align: center;
                font-size: calc(12px + .3077vw);
                color: #fff;
                user-select: none;
                cursor: pointer;
            }
        }
    }
}

.module2 {
    margin-top: 18.8462vw;

    .left {
        &>.info {
            color: #00bb98;
            font-size: calc(12px + .6154vw);
            margin-bottom: 1.9231vw;
        }

        &>h1 {
            font-size: calc(16px + 1.5385vw);
            line-height: 50px;
            margin-bottom: 2.3077vw;
        }

        &>p {
            font-size: calc(12px + .3077vw);
            // padding-right: 5.3846vw;
        }

        .items {
            .item {
                display: flex;
                align-items: center;
                padding: 1.5385vw 1.9231vw;
                border: 1px solid rgba(0, 187, 152, 0.3);
                border-radius: 8px;
                margin-bottom: 2.3077vw;

                .left {
                    padding: .7692vw calc(10px + .3846vw);
                    font-size: calc(15px + 1.1538vw);
                    color: #fd4c5c;
                    background-color: rgba(253, 76, 92, 0.2);
                    border-radius: 10px;
                    margin-right: 1.1538vw;
                }

                .middle {
                    display: flex;
                    flex-direction: column;

                    .title {
                        font-size: calc(12px + .6154vw);
                        // margin-bottom: 1.1538vw;
                    }

                    // .info{
                    //     font-size: calc(12px + .3077vw);
                    // }
                }

                .right {
                    font-size: calc(14px + .6154vw);
                    font-weight: bold;
                    margin-left: auto;
                }
            }

            .item:nth-child(2) {
                .left {
                    color: #00bb98;
                    background-color: rgba(0, 187, 152, 0.2);
                }
            }

            .item:nth-child(3) {
                .left {
                    color: #2b59ff;
                    background-color: rgba(43, 89, 255, 0.2);
                }
            }
        }
    }

    .pic {
        margin-top: 10vw;
    }
}

.module3 {
    margin-top: 8.8462vw;

    .title {
        margin-bottom: 6.3077vw;

        .info {
            color: #00bb98;
            font-size: calc(12px + .6154vw);
            margin-bottom: 1.9231vw;
        }

        h1 {
            font-size: calc(16px + 1.5385vw);
            line-height: 65px;
            margin-bottom: 2.3077vw;
        }

        p {
            font-size: calc(12px + .3077vw);
            // padding-right: 5.3846vw;
        }
    }

    #carouselExampleIndicators {
        padding: 0 80px;
        padding-bottom: 50px;

        .carousel-control-prev,
        .carousel-control-next {
            width: 8%;
        }

        .carousel-indicators {
            margin-bottom: 0;

            button {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: rgba(253, 76, 92, 0.2);
                opacity: 1;
            }

            .active {
                background-color: rgba(253, 76, 92);
            }
        }
    }

    .container {
        margin-top: 19.2308vw;

        .row {
            .right {
                display: flex;
                flex-direction: column;
                justify-content: center;

                .info {
                    color: #00bb98;
                    font-size: calc(12px + .6154vw);
                    margin-bottom: 1.9231vw;
                }

                h1 {
                    font-size: calc(16px + 1.5385vw);
                    line-height: 50px;
                    margin-bottom: 2.3077vw;
                }

                p {
                    font-size: calc(12px + .3077vw);
                    // padding-right: 5.3846vw;
                }

                .begin_btn {
                    width: calc(100px + 3.8462vw);
                    height: calc(30px + 1.5385vw);
                    background-color: #fd4c5c;
                    border-radius: 5px;
                    line-height: calc(30px + 1.5385vw);
                    text-align: center;
                    font-size: calc(12px + .3077vw);
                    color: #fff;
                    user-select: none;
                    cursor: pointer;
                }
            }
        }
    }
}

.module4 {
    margin-top: 18.4615vw;

    .title {
        margin-bottom: 6.3077vw;

        .info {
            color: #00bb98;
            font-size: calc(12px + .6154vw);
            margin-bottom: 1.9231vw;
        }

        h1 {
            font-size: calc(16px + 1.5385vw);
            line-height: 65px;
            margin-bottom: 2.3077vw;
        }

        p {
            font-size: calc(12px + .3077vw);
        }
    }

    .container {
        .item {
            display: flex;
            flex-direction: column;
            box-shadow: 0 5px 30px rgb(0 28 128 / 10%);
            border-radius: 14px;
            padding-bottom: 1.9231vw;

            // padding: 0;
            // margin: 0 5px;
            // margin: 0 calc(var(--bs-gutter-x) * .5);
            .info {
                padding: 0 .7692vw;

                .subject {
                    width: calc(42px + 2.3077vw);
                    height: calc(20px + .7692vw);
                    line-height: calc(20px + .7692vw);
                    text-align: center;
                    color: #00bb98;
                    border: 1px solid #00bb98;
                    border-radius: 8px;
                    margin-top: calc(-10px - .3846vw);
                    background-color: #fff;
                }

                p {
                    margin-top: 1.5385vw;
                    font-size: calc(12px + .3077vw);
                    margin-bottom: 1.9231vw;
                }

                .bottom {
                    margin-top: 3.0769vw;
                    display: flex;
                    flex-wrap: wrap;

                    .price {
                        font-size: calc(12px + .6154vw);
                        margin-bottom: .7692vw;
                    }

                    .price_ {
                        font-size: calc(12px + .1538vw);
                        opacity: 0.5;
                        text-decoration: line-through;
                        margin: 0 auto;
                    }

                    .b_btn {
                        width: calc(60px + 3.0769vw);
                        height: 30px;
                        border-radius: 8px;
                        background-color: #fd4c5c;
                        color: #fff;
                        font-size: calc(12px + .3077vw);
                        line-height: 30px;
                        text-align: center;
                        user-select: none;
                        cursor: pointer;
                    }
                }
            }

        }

        .item2 {
            .info {
                .subject {
                    color: #781bff;
                    border: 1px solid #781bff;
                }
            }
        }

        .item3 {
            .info {
                .subject {
                    color: #fd4c5c;
                    border: 1px solid #fd4c5c;
                }
            }
        }

        .item4 {
            .info {
                .subject {
                    color: #ffc83e;
                    border: 1px solid #ffc83e;
                }
            }
        }
    }
}

.module5 {
    margin-top: 20vw;
    margin-bottom: 7.6923vw;

    .title {
        margin-bottom: 6.3077vw;

        .info {
            color: #00bb98;
            font-size: calc(12px + .6154vw);
            margin-bottom: 1.9231vw;
        }

        h1 {
            font-size: calc(16px + 1.5385vw);
            line-height: 65px;
            margin-bottom: 2.3077vw;
        }

        p {
            font-size: calc(12px + .3077vw);
        }
    }

    .container {
        .right {
            #carouselExampleIndicators2 {
                padding-bottom: 3.4615vw;

                .carousel-item {
                    padding: 4.6154vw 6.1538vw;
                    background: url('../img/home_m5_2.png') no-repeat;
                    background-size: 100% 100%;

                    .info {
                        p {
                            font-size: calc(12px + .4615vw);
                            text-align: center;
                            margin-bottom: 3.8462vw;
                        }

                        .head {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            img {
                                margin-right: 1.5385vw;
                                width: calc(30px + 3.0769vw);
                                height: calc(30px + 3.0769vw);
                            }

                            .text {
                                h6 {
                                    font-size: calc(12px + .6154vw);
                                }

                                span {
                                    font-size: calc(12px + .3077vw);
                                    color: rgba(0, 11, 51, 0.7);
                                }
                            }
                        }
                    }
                }

                .carousel-indicators {
                    margin-bottom: 0;

                    button {
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: rgba(253, 76, 92, 0.2);
                        opacity: 1;
                    }

                    .active {
                        background-color: rgba(253, 76, 92);
                    }
                }
            }
        }

        .input_email {
            margin-top: 10vw;
            background: url('../img/home_m5_4.png') no-repeat;
            background-size: 100% 100%;
            padding-top: 5.6154vw;
            padding-bottom: 5.7692vw;

            .text {
                h1 {
                    color: #fff;
                    font-size: calc(16px + 1.5385vw);
                    text-align: center;
                    line-height: 60px;
                }

                .inp {
                    // width: calc(200px + 25.7692vw);
                    height: calc(40px + 1.5385vw);
                    background-color: #fff;
                    border-radius: 10px;
                    margin: 0 auto;
                    margin-top: 5vw;
                    display: flex;
                    padding: 7px;

                    input {
                        text-indent: 2.3077vw;
                    }

                    .e_btn {
                        width: calc(73px + 7.6923vw);
                        height: 100%;
                        background-color: #fd4c5c;
                        border-radius: 4px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-left: auto;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:992px) {
    header {
        background: url('../img/banner1.png') no-repeat;
        background-size: cover;
        background-position: top top;
    }
}